<div ng-include="'main/_/top.html'"></div>

<div style="overflow:auto;height:100%">

  <div class="clearfix" style="height:40px;"></div>

  <div class="col-sm-8 col-sm-offset-2">
    <div class="panel panel-default shadow10">

      <div class="panel-heading pd0" style="border:0">
        <ul class="nav nav-tabs">
          <li role="presentation">
            <a href="">{{'auth.accessLogin'|translate}}</a>
          </li>
        </ul>
      </div>

      <div class="panel-body">
        <form class="form-horizontal" name="form1" ng-submit="onSubmit(form1)">
          <div class="form-group has-feedback" ng-class="{'has-error': !form1.endpoint.$valid }">
            <label for="aid" class="col-sm-4 control-label">
              <span class="red">*</span> Endpoint:</label>
            <div class="col-sm-7">
              <select required ng-model="selectedCloud" class="form-control" id="endpoint" name="endpoint" ng-options="cloud.value as cloud.name for cloud in clouds">
              </select>
            </div>
            <div class="col-sm-1">
              <button type="button" class="btn btn-md pull-right" ng-if="selectedCloud == 'customized'" ng-click="showCustomizedCloud()">
                <i class="glyphicon glyphicon-cog"></i>
                <input type="hidden" is-cloud-configured ng-model="privateCloud" />
              </button>
            </div>
          </div>
          <div class="form-group has-feedback" ng-class="{'has-error': !form1.aid.$valid }">
            <label for="aid" class="col-sm-4 control-label">
              <span class="red">*</span> AccessKeyId:</label>
            <div class="col-sm-7">
              <input type="text" required ng-model="item.id" class="form-control" id="aid" name="aid" placeholder="{{'auth.id.placeholder'|translate}}">
            </div>
            <div class="col-sm-1"></div>
          </div>
          <div class="form-group has-feedback" ng-class="{'has-error': !form1.akey.$valid }">
            <label for="akey" class="col-sm-4 control-label">
              <span class="red">*</span> AccessKeySecret:</label>
            <div class="col-sm-7">
              <input type="password" required ng-model="item.secret" class="form-control" id="akey" name="akey" placeholder="{{'auth.secret.placeholder'|translate}}">
            </div>
            <div class="col-sm-1"></div>
          </div>

          <div class="form-group">
            <div class="col-sm-offset-4 col-sm-8">
              <button type="submit" class="btn btn-primary" ng-disabled="!form1.$valid">
                {{'auth.login'|translate}}
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="clearfix"></div>

  <div class="col-xs-12" ng-show="flags.showHis=='YES'">
    <header>
      <h4 class="col-xs-6">
        {{'auth.akHistories'|translate}}
        <!-- AK历史 -->
      </h4>
      <div class="col-xs-6">
        <a href="" ng-click="showCleanHistories()" class="pull-right text-danger" style="padding-top:10px;">
          {{'auth.clearHistories'|translate}}
          <!-- 清空历史 -->
        </a>
      </div>
    </header>
    <table class="table table-condensed table-striped table-bordered">
      <tr>
        <th>-</th>
        <th>ID</th>
        <th>Secret</th>
        <th>{{'auth.description'|translate}}</th>
        <th>{{'actions'|translate}}</th>
      </tr>
      <tr ng-repeat="h in his">
        <td>{{$index+1}}</td>
        <td>{{h.id}}</td>
        <td>{{h.secret|hideSecret}}</td>
        <td>{{h.desc}}</td>
        <td>
          <a href="" ng-click="useHis(h)">{{'use'|translate}}</a> |
          <a href="" ng-click="showRemoveHis(h)" class="text-danger">{{'delete'|translate}}</a>
        </td>
      </tr>
    </table>
  </div>

</div>
